<%--
  Created by IntelliJ IDEA.
  User: xxswh
  Date: 2021/12/27
  Time: 11:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/css.css">
  <title>Supermarket管理系统</title>
</head>
<body>
<!-- 这是个大盒子 -->
<div class="all">
  <!-- 这是导航栏 -->
  <div class="nav">
    <h2>Supermarket</h2>
    <div class="user-box">
      <p>欢迎您！用户！</p>
      <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    </div>
  </div>
  <!-- 这是主要的内容盒子 -->
  <div class="main">
    <div class="main-box">
      <!-- 左边的导航栏 -->
      <div class="main-left">
        <ul>
          <li>
            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
            商品管理
          </li>
        </ul>
      </div>
      <!-- 右边的表单 -->
      <div class="main-right">
        <div class="main-right-box">
          <!-- 这是搜索框 -->
          <div class="search">
            <h4>商品查询</h4>
            <p>商品查询: </p><input type="text" class="input-search">
            <button class="search-btn"><i class="fa fa-search" aria-hidden="true"></i> 查询</button>
            <button class="add-btn"><i class="fa fa-plus" aria-hidden="true"></i> 增加</button>
          </div>
          <!-- 表格 -->
          <h4>商品目录</h4>
          <div class="table">
            <table>
              <thead>
              <tr>
                <th>商品</th>
                <th>商品</th>
                <th>商品</th>
                <th>商品</th>
                <th>商品</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>商品</td>
                <td>商品</td>
                <td>商品</td>
                <td>商品</td>
                <td>商品</td>
                <td><button>详情</button><button>删除</button></td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 点击增加显示添加弹窗 -->
<div class="hidden-add">
  <div class="hidden-add-box">
    <h3>添加商品</h3><div class="back"><i class="fa fa-times" aria-hidden="true"></i></div>
    <div class="hidden-add-input">
      <p>商品:</p><input type="text"><br>
      <p>商品:</p><input type="text"><br>
      <p>商品:</p><input type="text"><br>
      <p>商品:</p><input type="text"><br>
      <button class="add">添加</button>
    </div>
  </div>
</div>
</body>
<script src="./js/js.js"></script>
</html>
